<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI datepicker documentation</title>

<style>
body {
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif"
}

.gutter {
	display: none;
}
</style>
</head>
<body>

	<script>{
		"title":
			"Datepicker Widget",
		"excerpt":
			"Select a date from a popup or inline calendar",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script>
	<article id="datepicker1" class="entry widget">
		<h2 class="section-title">
			<span>Datepicker Widget</span><span class="version-details">version
				added: 1.0</span>
		</h2>
		<div class="entry-wrapper">
			<p class="desc">
				<strong>Description: </strong>Select a date from a popup or inline
				calendar
			</p>
			<section id="quick-nav">
				<header>
					<h2>
						QuickNav<a href="#entry-examples">Examples</a>
					</h2>
				</header>
				<div class="quick-nav-section">
					<h3>Options</h3>
					<div>
						<a href="#option-altField">altField</a>
					</div>
					<div>
						<a href="#option-altFormat">altFormat</a>
					</div>
					<div>
						<a href="#option-appendText">appendText</a>
					</div>
					<div>
						<a href="#option-autoSize">autoSize</a>
					</div>
					<div>
						<a href="#option-buttonImage">buttonImage</a>
					</div>
					<div>
						<a href="#option-buttonImageOnly">buttonImageOnly</a>
					</div>
					<div>
						<a href="#option-buttonText">buttonText</a>
					</div>
					<div>
						<a href="#option-calculateWeek">calculateWeek</a>
					</div>
					<div>
						<a href="#option-changeMonth">changeMonth</a>
					</div>
					<div>
						<a href="#option-changeYear">changeYear</a>
					</div>
					<div>
						<a href="#option-closeText">closeText</a>
					</div>
					<div>
						<a href="#option-constrainInput">constrainInput</a>
					</div>
					<div>
						<a href="#option-currentText">currentText</a>
					</div>
					<div>
						<a href="#option-dateFormat">dateFormat</a>
					</div>
					<div>
						<a href="#option-dayNames">dayNames</a>
					</div>
					<div>
						<a href="#option-dayNamesMin">dayNamesMin</a>
					</div>
					<div>
						<a href="#option-dayNamesShort">dayNamesShort</a>
					</div>
					<div>
						<a href="#option-defaultDate">defaultDate</a>
					</div>
					<div>
						<a href="#option-duration">duration</a>
					</div>
					<div>
						<a href="#option-firstDay">firstDay</a>
					</div>
					<div>
						<a href="#option-gotoCurrent">gotoCurrent</a>
					</div>
					<div>
						<a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a>
					</div>
					<div>
						<a href="#option-isRTL">isRTL</a>
					</div>
					<div>
						<a href="#option-maxDate">maxDate</a>
					</div>
					<div>
						<a href="#option-minDate">minDate</a>
					</div>
					<div>
						<a href="#option-monthNames">monthNames</a>
					</div>
					<div>
						<a href="#option-monthNamesShort">monthNamesShort</a>
					</div>
					<div>
						<a href="#option-navigationAsDateFormat">navigationAsDateFormat</a>
					</div>
					<div>
						<a href="#option-nextText">nextText</a>
					</div>
					<div>
						<a href="#option-numberOfMonths">numberOfMonths</a>
					</div>
					<div>
						<a href="#option-prevText">prevText</a>
					</div>
					<div>
						<a href="#option-selectOtherMonths">selectOtherMonths</a>
					</div>
					<div>
						<a href="#option-shortYearCutoff">shortYearCutoff</a>
					</div>
					<div>
						<a href="#option-showAnim">showAnim</a>
					</div>
					<div>
						<a href="#option-showButtonPanel">showButtonPanel</a>
					</div>
					<div>
						<a href="#option-showCurrentAtPos">showCurrentAtPos</a>
					</div>
					<div>
						<a href="#option-showMonthAfterYear">showMonthAfterYear</a>
					</div>
					<div>
						<a href="#option-showOn">showOn</a>
					</div>
					<div>
						<a href="#option-showOptions">showOptions</a>
					</div>
					<div>
						<a href="#option-showOtherMonths">showOtherMonths</a>
					</div>
					<div>
						<a href="#option-showWeek">showWeek</a>
					</div>
					<div>
						<a href="#option-stepMonths">stepMonths</a>
					</div>
					<div>
						<a href="#option-weekHeader">weekHeader</a>
					</div>
					<div>
						<a href="#option-yearRange">yearRange</a>
					</div>
					<div>
						<a href="#option-yearSuffix">yearSuffix</a>
					</div>
					<div>
						<a href="#option-beforeShow">beforeShow</a>
					</div>
					<div>
						<a href="#option-beforeShowDay">beforeShowDay</a>
					</div>
					<div>
						<a href="#option-onChangeMonthYear">onChangeMonthYear</a>
					</div>
					<div>
						<a href="#option-onClose">onClose</a>
					</div>
					<div>
						<a href="#option-onSelect">onSelect</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Methods</h3>
					<div>
						<a href="#method-destroy">destroy</a>
					</div>
					<div>
						<a href="#method-dialog">dialog</a>
					</div>
					<div>
						<a href="#method-isDisabled">isDisabled</a>
					</div>
					<div>
						<a href="#method-hide">hide</a>
					</div>
					<div>
						<a href="#method-show">show</a>
					</div>
					<div>
						<a href="#method-refresh">refresh</a>
					</div>
					<div>
						<a href="#method-getDate">getDate</a>
					</div>
					<div>
						<a href="#method-setDate">setDate</a>
					</div>
					<div>
						<a href="#method-option">option</a>
					</div>
					<div>
						<a href="#method-widget">widget</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Events</h3>
				</div>
			</section>
			<div class="longdesc" id="entry-longdesc">
				<p>The jQuery UI Datepicker is a highly configurable plugin that
					adds datepicker functionality to your pages. You can customize the
					date format and language, restrict the selectable date ranges and
					add in buttons and other navigation options easily.</p>

				<p>By default, the datepicker calendar opens in a small overlay
					when the associated text field gains focus. For an inline calendar,
					simply attach the datepicker to a div or span.</p>

				<h3>Keyboard interaction</h3>
				<p>While the datepicker is open, the following key commands are
					available:</p>
				<ul>
					<li>PAGE UP: Move to the previous month.</li>
					<li>PAGE DOWN: Move to the next month.</li>
					<li>CTRL+PAGE UP: Move to the previous year.</li>
					<li>CTRL+PAGE DOWN: Move to the next year.</li>
					<li>CTRL+HOME: Move to the current month. Open the datepicker
						if closed.</li>
					<li>CTRL+LEFT: Move to the previous day.</li>
					<li>CTRL+RIGHT: Move to the next day.</li>
					<li>CTRL+UP: Move to the previous week.</li>
					<li>CTRL+DOWN: Move the next week.</li>
					<li>ENTER: Select the focused date.</li>
					<li>CTRL+END: Close the datepicker and erase the date.</li>
					<li>ESCAPE: Close the datepicker without selection.</li>
				</ul>

				<h3 id="utility-functions">Utility functions</h3>
				<ul>
					<li>$.datepicker.setDefaults( settings ) - Set settings for
						all datepicker instances.</li>
					<li>$.datepicker.formatDate( format, date, settings ) - Format
						a date into a string value with a specified format.</li>
					<li>$.datepicker.parseDate( format, value, settings ) -
						Extract a date from a string value with a specified format.</li>
					<li>$.datepicker.iso8601Week( date ) - Determine the week of
						the year for a given date: 1 to 53.</li>
					<li>$.datepicker.noWeekends - Set as beforeShowDay function to
						prevent selection of weekends.</li>
				</ul>

				<h3>Localization</h3>
				<p>
					Datepicker provides support for localizing its content to cater for
					different languages and date formats. Each localization is
					contained within its own file with the language code appended to
					the name, e.g.,
					<code>jquery.ui.datepicker-fr.js</code>
					for French. The desired localization file should be included after
					the main datepicker code. Each localization file adds its settings
					to the set of available localizations and automatically applies
					them as defaults for all instances.
				</p>
				<p>
					The
					<code>$.datepicker.regional</code>
					attribute holds an array of localizations, indexed by language
					code, with
					<code>""</code>
					referring to the default (English). Each entry is an object with
					the following attributes:
					<code>closeText</code>
					,
					<code>prevText</code>
					,
					<code>nextText</code>
					,
					<code>currentText</code>
					,
					<code>monthNames</code>
					,
					<code>monthNamesShort</code>
					,
					<code>dayNames</code>
					,
					<code>dayNamesShort</code>
					,
					<code>dayNamesMin</code>
					,
					<code>weekHeader</code>
					,
					<code>dateFormat</code>
					,
					<code>firstDay</code>
					,
					<code>isRTL</code>
					,
					<code>showMonthAfterYear</code>
					, and
					<code>yearSuffix</code>
					.
				</p>
				<p>You can restore the default localizations with:</p>
				<code>$.datepicker.setDefaults( $.datepicker.regional[ "" ]
					);</code>
				<p>And can then override an individual datepicker for a specific
					locale:</p>
				<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ]
					);</code>

				<h3>Dependencies</h3>
				<ul>
					<li><a href="/category/ui-core/">UI Core</a></li>
					<li><a href="/category/effects-core/">Effects Core</a>
						(optional; for use with the <a href="#option-showAnim"><code>showAnim</code></a>
						option)</li>
				</ul>
			</div>
			<h3>Additional Notes:</h3>
			<div class="longdesc">
				<ul>
					<li>This widget requires some functional CSS, otherwise it
						won't work. If you build a custom theme, use the widget's specific
						CSS file as a starting point.</li>
				</ul>
			</div>
			<section id="options">
				<header>
					<h2 class="underline">Options</h2>
				</header>
				<div id="option-altField" class="api-item first-item">
					<h3>
						altField<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Selector">Selector</a> or <a
							href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a
							href="http://api.jquery.com/Types#Element">Element</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>
						An input element that is to be updated with the selected date from
						the datepicker. Use the <a href="#option-altFormat"><code>altFormat</code></a>
						option to change the format of the date within this field. Leave
						as blank for no alternate field.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the altField option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ altField: <span
															class="string">"#actualDate"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the altField option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> altField = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"altField"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"altField"</span>, <span
															class="string">"#actualDate"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-altFormat" class="api-item">
					<h3>
						altFormat<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>
						The <a href="#option-dateFormat"><code>dateFormat</code></a> to be
						used for the <a href="#option-altField"><code>altField</code></a>
						option. This allows one date format to be shown to the user for
						selection purposes, while a different format is actually sent
						behind the scenes. For a full list of the possible formats see the
						[[UI/Datepicker/formatDate|formatDate]] function
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the altFormat option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ altFormat: <span
															class="string">"yy-mm-dd"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the altFormat option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> altFormat = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"altFormat"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"altFormat"</span>, <span
															class="string">"yy-mm-dd"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-appendText" class="api-item">
					<h3>
						appendText<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>The text to display after each date field, e.g., to show
						the required format.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the appendText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ appendText: <span
															class="string">"(yyyy-mm-dd)"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the appendText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> appendText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"appendText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"appendText"</span>, <span
															class="string">"(yyyy-mm-dd)"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-autoSize" class="api-item">
					<h3>
						autoSize<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Set to
						<code>true</code>
						to automatically resize the input field to accommodate dates in
						the current <a href="#option-dateFormat"><code>dateFormat</code></a>.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the autoSize option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ autoSize: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the autoSize option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> autoSize = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"autoSize"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"autoSize"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-beforeShow" class="api-item">
					<h3>
						beforeShow<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Function">Function</a>( <a
							href="http://api.jquery.com/Types#Element">Element</a> input, <a
							href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>A function that takes an input field and current
						datepicker instance and returns an options object to update the
						datepicker with. It is called just before the datepicker is
						displayed.</div>
				</div>
				<div id="option-beforeShowDay" class="api-item">
					<h3>
						beforeShowDay<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Function">Function</a>( <a
							href="http://api.jquery.com/Types#Date">Date</a> date )</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						A function takes a date as a parameter and must return an array
						with
						<code>[0]</code>
						equal to
						<code>true</code>
						/
						<code>false</code>
						indicating whether or not this date is selectable,
						<code>[1]</code>
						equal to a CSS class name or
						<code>""</code>
						for the default presentation, and
						<code>[2]</code>
						an optional popup tooltip for this date. It is called for each day
						in the datepicker before it is displayed.
					</div>
				</div>
				<div id="option-buttonImage" class="api-item">
					<h3>
						buttonImage<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>
						The URL for the popup button image. If set, the <a
							href="#option-buttonText"><code>buttonText</code></a> option
						becomes the
						<code>alt</code>
						value and is not directly displayed.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the buttonImage option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ buttonImage: <span
															class="string">"/images/datepicker.gif"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the buttonImage option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> buttonImage = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonImage"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonImage"</span>, <span
															class="string">"/images/datepicker.gif"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-buttonImageOnly" class="api-item">
					<h3>
						buttonImageOnly<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether the button image should be rendered by itself
						instead of inside a button element.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the buttonImageOnly option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ buttonImageOnly: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the buttonImageOnly option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> buttonImageOnly = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonImageOnly"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonImageOnly"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-buttonText" class="api-item">
					<h3>
						buttonText<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"..."</code>
					</div>
					<div>
						The text to display on the trigger button. Use in conjunction with
						the <a href="#option-showOn"><code>showOn</code></a> option set to
						<code>"button"</code>
						or
						<code>"both"</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the buttonText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ buttonText: <span
															class="string">"Choose"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the buttonText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> buttonText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"buttonText"</span>, <span
															class="string">"Choose"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-calculateWeek" class="api-item">
					<h3>
						calculateWeek<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Function">Function</a>()</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>jQuery.datepicker.iso8601Week</code>
					</div>
					<div>A function to calculate the week of the year for a given
						date. The default implementation uses the ISO 8601 definition:
						weeks start on a Monday; the first week of the year contains the
						first Thursday of the year.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the calculateWeek option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ calculateWeek: myWeekCalc });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the calculateWeek option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> calculateWeek = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"calculateWeek"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"calculateWeek"</span>, myWeekCalc );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-changeMonth" class="api-item">
					<h3>
						changeMonth<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether the month should be rendered as a dropdown
						instead of text.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the changeMonth option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ changeMonth: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the changeMonth option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> changeMonth = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"changeMonth"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"changeMonth"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-changeYear" class="api-item">
					<h3>
						changeYear<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Whether the year should be rendered as a dropdown instead of text.
						Use the <a href="#option-yearRange"><code>yearRange</code></a>
						option to control which years are made available for selection.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the changeYear option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ changeYear: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the changeYear option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> changeYear = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"changeYear"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"changeYear"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-closeText" class="api-item">
					<h3>
						closeText<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"Done"</code>
					</div>
					<div>
						The text to display for the close link. Use the <a
							href="#option-showButtonPanel"><code>showButtonPanel</code></a>
						option to display this button.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the closeText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ closeText: <span
															class="string">"Close"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the closeText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> closeText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"closeText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"closeText"</span>, <span
															class="string">"Close"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-constrainInput" class="api-item">
					<h3>
						constrainInput<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>
						When
						<code>true</code>
						, entry in the input field is constrained to those characters
						allowed by the current <a href="#option-dateFormat"><code>dateFormat</code></a>
						option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the constrainInput option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ constrainInput: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the constrainInput option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> constrainInput = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"constrainInput"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"constrainInput"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-currentText" class="api-item">
					<h3>
						currentText<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"Today"</code>
					</div>
					<div>
						The text to display for the current day link. Use the <a
							href="#option-showButtonPanel"><code>showButtonPanel</code></a>
						option to display this button.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the currentText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ currentText: <span
															class="string">"Now"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the currentText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> currentText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"currentText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"currentText"</span>, <span
															class="string">"Now"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-dateFormat" class="api-item">
					<h3>
						dateFormat<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"mm/dd/yy"</code>
					</div>
					<div>
						The format for parsed and displayed dates. For a full list of the
						possible formats see the
						<code>[[UI/Datepicker/formatDate|formatDate]]</code>
						function.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the dateFormat option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ dateFormat: <span
															class="string">"yy-mm-dd"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the dateFormat option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> dateFormat = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dateFormat"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dateFormat"</span>, <span
															class="string">"yy-mm-dd"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-dayNames" class="api-item">
					<h3>
						dayNames<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>[ "Sunday", "Monday", "Tuesday", "Wednesday",
							"Thursday", "Friday", "Saturday" ]</code>
					</div>
					<div>
						The list of long day names, starting from Sunday, for use as
						requested via the <a href="#option-dateFormat"><code>dateFormat</code></a>
						option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the dayNames option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ dayNames: [ <span
															class="string">"Dimanche"</span>, <span class="string">"Lundi"</span>, <span
															class="string">"Mardi"</span>, <span class="string">"Mercredi"</span>, <span
															class="string">"Jeudi"</span>, <span class="string">"Vendredi"</span>, <span
															class="string">"Samedi"</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the dayNames option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> dayNames = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNames"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNames"</span>, [ <span
															class="string">"Dimanche"</span>, <span class="string">"Lundi"</span>, <span
															class="string">"Mardi"</span>, <span class="string">"Mercredi"</span>, <span
															class="string">"Jeudi"</span>, <span class="string">"Vendredi"</span>, <span
															class="string">"Samedi"</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-dayNamesMin" class="api-item">
					<h3>
						dayNamesMin<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]</code>
					</div>
					<div>The list of minimised day names, starting from Sunday,
						for use as column headers within the datepicker.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the dayNamesMin option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ dayNamesMin: [ <span
															class="string">"Di"</span>, <span class="string">"Lu"</span>, <span
															class="string">"Ma"</span>, <span class="string">"Me"</span>, <span
															class="string">"Je"</span>, <span class="string">"Ve"</span>, <span
															class="string">"Sa"</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the dayNamesMin option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> dayNamesMin = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNamesMin"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNamesMin"</span>, [ <span
															class="string">"Di"</span>, <span class="string">"Lu"</span>, <span
															class="string">"Ma"</span>, <span class="string">"Me"</span>, <span
															class="string">"Je"</span>, <span class="string">"Ve"</span>, <span
															class="string">"Sa"</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-dayNamesShort" class="api-item">
					<h3>
						dayNamesShort<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]</code>
					</div>
					<div>
						The list of abbreviated day names, starting from Sunday, for use
						as requested via the <a href="#option-dateFormat"><code>dateFormat</code></a>
						option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the dayNamesShort option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ dayNamesShort: [ <span
															class="string">"Dim"</span>, <span class="string">"Lun"</span>, <span
															class="string">"Mar"</span>, <span class="string">"Mer"</span>, <span
															class="string">"Jeu"</span>, <span class="string">"Ven"</span>, <span
															class="string">"Sam"</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the dayNamesShort option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> dayNamesShort = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNamesShort"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"dayNamesShort"</span>, [ <span
															class="string">"Dim"</span>, <span class="string">"Lun"</span>, <span
															class="string">"Mar"</span>, <span class="string">"Mer"</span>, <span
															class="string">"Jeu"</span>, <span class="string">"Ven"</span>, <span
															class="string">"Sam"</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-defaultDate" class="api-item">
					<h3>
						defaultDate<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Date">Date</a> or <a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						Set the date to highlight on first opening if the field is blank.
						Specify either an actual date via a Date object or as a string in
						the current
						<code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>
						, or a number of days from today (e.g. +7) or a string of values
						and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for
						days, e.g. '+1m +7d'), or null for today.
					</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Date</strong>: A date object containing the
							default date.</li>
						<li><strong>Number</strong>: A number of days from today. For
							example <code>2</code> represents two days from today and <code>-1</code>
							represents yesterday.</li>
						<li><strong>String</strong>: A string in the format defined
							by the <a href="#option-dateFormat"><code>dateFormat</code></a>
							option, or a relative date. Relative dates must contain value and
							period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code>
							for months, <code>"w"</code> for weeks, and <code>"d"</code> for
							days. For example, <code>"+1m +7d"</code> represents one month
							and seven days from today.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the defaultDate option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ defaultDate: +<span
															class="number">7</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the defaultDate option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> defaultDate = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"defaultDate"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"defaultDate"</span>, +<span
															class="number">7</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-duration" class="api-item">
					<h3>
						duration<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#"></a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"normal"</code>
					</div>
					<div>Control the speed at which the datepicker appears, it
						may be a time in milliseconds or a string representing one of the
						three predefined speeds ("slow", "normal", "fast").</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the duration option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ duration: <span
															class="string">"slow"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the duration option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> duration = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"duration"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"duration"</span>, <span
															class="string">"slow"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-firstDay" class="api-item">
					<h3>
						firstDay<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Integer">Integer</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>
						Set the first day of the week: Sunday is
						<code>0</code>
						, Monday is
						<code>1</code>
						, etc.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the firstDay option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ firstDay: <span
															class="number">1</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the firstDay option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> firstDay = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"firstDay"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"firstDay"</span>, <span
															class="number">1</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-gotoCurrent" class="api-item">
					<h3>
						gotoCurrent<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						When
						<code>true</code>
						, the current day link moves to the currently selected date
						instead of today.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the gotoCurrent option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ gotoCurrent: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the gotoCurrent option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> gotoCurrent = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"gotoCurrent"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"gotoCurrent"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-hideIfNoPrevNext" class="api-item">
					<h3>
						hideIfNoPrevNext<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Normally the previous and next links are disabled when not
						applicable (see the <a href="#option-minDate"><code>minDate</code></a>
						and <a href="#option-maxDate"><code>maxDate</code></a> options).
						You can hide them altogether by setting this attribute to
						<code>true</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the hideIfNoPrevNext option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ hideIfNoPrevNext: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the hideIfNoPrevNext option, after
						initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> hideIfNoPrevNext = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"hideIfNoPrevNext"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"hideIfNoPrevNext"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-isRTL" class="api-item">
					<h3>
						isRTL<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether the current language is drawn from right to
						left.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the isRTL option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ isRTL: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the isRTL option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> isRTL = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"isRTL"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"isRTL"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-maxDate" class="api-item">
					<h3>
						maxDate<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Date">Date</a> or <a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						The maximum selectable date. When set to
						<code>null</code>
						, there is no maximum.
					</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Date</strong>: A date object containing the
							maximum date.</li>
						<li><strong>Number</strong>: A number of days from today. For
							example <code>2</code> represents two days from today and <code>-1</code>
							represents yesterday.</li>
						<li><strong>String</strong>: A string in the format defined
							by the <a href="#option-dateFormat"><code>dateFormat</code></a>
							option, or a relative date. Relative dates must contain value and
							period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code>
							for months, <code>"w"</code> for weeks, and <code>"d"</code> for
							days. For example, <code>"+1m +7d"</code> represents one month
							and seven days from today.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the maxDate option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ maxDate: <span
															class="string">"+1m +1w"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the maxDate option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> maxDate = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"maxDate"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"maxDate"</span>, <span
															class="string">"+1m +1w"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-minDate" class="api-item">
					<h3>
						minDate<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Date">Date</a> or <a
							href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						The minimum selectable date. When set to
						<code>null</code>
						, there is no minimum.
					</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Date</strong>: A date object containing the
							minimum date.</li>
						<li><strong>Number</strong>: A number of days from today. For
							example <code>2</code> represents two days from today and <code>-1</code>
							represents yesterday.</li>
						<li><strong>String</strong>: A string in the format defined
							by the <a href="#option-dateFormat"><code>dateFormat</code></a>
							option, or a relative date. Relative dates must contain value and
							period pairs; valid periods are <code>"y"</code> for years, <code>"m"</code>
							for months, <code>"w"</code> for weeks, and <code>"d"</code> for
							days. For example, <code>"+1m +7d"</code> represents one month
							and seven days from today.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the minDate option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ minDate: <span
															class="keyword">new</span> Date(<span class="number">2007</span>, <span
															class="number">1</span> - <span class="number">1</span>, <span
															class="number">1</span>) });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the minDate option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> minDate = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"minDate"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"minDate"</span>, <span
															class="keyword">new</span> Date(<span class="number">2007</span>, <span
															class="number">1</span> - <span class="number">1</span>, <span
															class="number">1</span>) );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-monthNames" class="api-item">
					<h3>
						monthNames<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>[ "January", "February", "March", "April", "May",
							"June", "July", "August", "September", "October", "November",
							"December" ]</code>
					</div>
					<div>
						The list of full month names, for use as requested via the <a
							href="#option-dateFormat"><code>dateFormat</code></a> option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the monthNames option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ monthNames: [ <span
															class="string">"Januar"</span>, <span class="string">"Februar"</span>, <span
															class="string">"Marts"</span>, <span class="string">"April"</span>, <span
															class="string">"Maj"</span>, <span class="string">"Juni"</span>, <span
															class="string">"Juli"</span>, <span class="string">"August"</span>, <span
															class="string">"September"</span>, <span class="string">"Oktober"</span>, <span
															class="string">"November"</span>, <span class="string">"December"</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the monthNames option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> monthNames = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"monthNames"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"monthNames"</span>, [ <span
															class="string">"Januar"</span>, <span class="string">"Februar"</span>, <span
															class="string">"Marts"</span>, <span class="string">"April"</span>, <span
															class="string">"Maj"</span>, <span class="string">"Juni"</span>, <span
															class="string">"Juli"</span>, <span class="string">"August"</span>, <span
															class="string">"September"</span>, <span class="string">"Oktober"</span>, <span
															class="string">"November"</span>, <span class="string">"December"</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-monthNamesShort" class="api-item">
					<h3>
						monthNamesShort<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
							"Aug", "Sep", "Oct", "Nov", "Dec" ]</code>
					</div>
					<div>
						The list of abbreviated month names, as used in the month header
						on each datepicker and as requested via the <a
							href="#option-dateFormat"><code>dateFormat</code></a> option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the monthNamesShort option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ monthNamesShort: [ <span
															class="string">"Jan"</span>, <span class="string">"Feb"</span>, <span
															class="string">"Mar"</span>, <span class="string">"Apr"</span>, <span
															class="string">"Maj"</span>, <span class="string">"Jun"</span>, <span
															class="string">"Jul"</span>, <span class="string">"Aug"</span>, <span
															class="string">"Sep"</span>, <span class="string">"Okt"</span>, <span
															class="string">"Nov"</span>, <span class="string">"Dec"</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the monthNamesShort option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> monthNamesShort = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"monthNamesShort"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"monthNamesShort"</span>, [ <span
															class="string">"Jan"</span>, <span class="string">"Feb"</span>, <span
															class="string">"Mar"</span>, <span class="string">"Apr"</span>, <span
															class="string">"Maj"</span>, <span class="string">"Jun"</span>, <span
															class="string">"Jul"</span>, <span class="string">"Aug"</span>, <span
															class="string">"Sep"</span>, <span class="string">"Okt"</span>, <span
															class="string">"Nov"</span>, <span class="string">"Dec"</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-navigationAsDateFormat" class="api-item">
					<h3>
						navigationAsDateFormat<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Whether the <a href="#option-prevText"><code>prevText</code></a>
						and <a href="#option-nextText"><code>nextText</code></a> options
						should be parsed as dates by the
						<code>[[UI/Datepicker/formatDate|formatDate]]</code>
						function, allowing them to display the target month names for
						example.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the navigationAsDateFormat
						option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ navigationAsDateFormat: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the navigationAsDateFormat option, after
						initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> navigationAsDateFormat = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"navigationAsDateFormat"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"navigationAsDateFormat"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-nextText" class="api-item">
					<h3>
						nextText<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"Next"</code>
					</div>
					<div>The text to display for the next month link. With the
						standard ThemeRoller styling, this value is replaced by an icon.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the nextText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ nextText: <span
															class="string">"Later"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the nextText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> nextText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"nextText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"nextText"</span>, <span
															class="string">"Later"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-numberOfMonths" class="api-item">
					<h3>
						numberOfMonths<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>1</code>
					</div>
					<div>The number of months to show at once.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Number</strong>: The number of months to display
							in a single row.</li>
						<li><strong>Array</strong>: An array defining the number of
							rows and columns to display.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the numberOfMonths option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ numberOfMonths: [ <span
															class="number">2</span>, <span class="number">3</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the numberOfMonths option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> numberOfMonths = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"numberOfMonths"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"numberOfMonths"</span>, [ <span
															class="number">2</span>, <span class="number">3</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-onChangeMonthYear" class="api-item">
					<h3>
						onChangeMonthYear<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Function">Function</a>( <a
							href="http://api.jquery.com/Types#Integer">Integer</a> year, <a
							href="http://api.jquery.com/Types#Integer">Integer</a> month, <a
							href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						Called when the datepicker moves to a new month and/or year. The
						function receives the selected year, month (1-12), and the
						datepicker instance as parameters.
						<code>this</code>
						refers to the associated input field.
					</div>
				</div>
				<div id="option-onClose" class="api-item">
					<h3>
						onClose<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Function">Function</a>( <a
							href="http://api.jquery.com/Types#String">String</a> dateText, <a
							href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						Called when the datepicker is closed, whether or not a date is
						selected. The function receives the selected date as text (
						<code>""</code>
						if none) and the datepicker instance as parameters.
						<code>this</code>
						refers to the associated input field.
					</div>
				</div>
				<div id="option-onSelect" class="api-item">
					<h3>
						onSelect<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Function">Function</a>( <a
							href="http://api.jquery.com/Types#String">String</a> dateText, <a
							href="http://api.jquery.com/Types#Object">Object</a> inst )</span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						Called when the datepicker is selected. The function receives the
						selected date as text and the datepicker instance as parameters.
						<code>this</code>
						refers to the associated input field.
					</div>
				</div>
				<div id="option-prevText" class="api-item">
					<h3>
						prevText<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"Prev"</code>
					</div>
					<div>The text to display for the previous month link. With
						the standard ThemeRoller styling, this value is replaced by an
						icon.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the prevText option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ prevText: <span
															class="string">"Earlier"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the prevText option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> prevText = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"prevText"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"prevText"</span>, <span
															class="string">"Earlier"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-selectOtherMonths" class="api-item">
					<h3>
						selectOtherMonths<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Whether days in other months shown before or after the current
						month are selectable. This only applies if the <a
							href="#option-showOtherMonths"><code>showOtherMonths</code></a>
						option is set to
						<code>true</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the selectOtherMonths option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ selectOtherMonths: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the selectOtherMonths option, after
						initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> selectOtherMonths = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"selectOtherMonths"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"selectOtherMonths"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-shortYearCutoff" class="api-item">
					<h3>
						shortYearCutoff<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Number">Number</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"+10"</code>
					</div>
					<div>
						The cutoff year for determining the century for a date (used in
						conjunction with
						<code>[[UI/Datepicker#option-dateFormat|dateFormat]]</code>
						'y'). Any dates entered with a year value less than or equal to
						the cutoff year are considered to be in the current century, while
						those greater than it are deemed to be in the previous century.
					</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Number</strong>: A value between <code>0</code>
							and <code>99</code> indicating the cutoff year.</li>
						<li><strong>String</strong>: A relative number of years from
							the current year, e.g., <code>"+3"</code> or <code>"-5"</code>.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the shortYearCutoff option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ shortYearCutoff: <span
															class="number">50</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the shortYearCutoff option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> shortYearCutoff = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"shortYearCutoff"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"shortYearCutoff"</span>, <span
															class="number">50</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showAnim" class="api-item">
					<h3>
						showAnim<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"show"</code>
					</div>
					<div>
						The name of the animation used to show and hide the datepicker.
						Use
						<code>"show"</code>
						(the default),
						<code>"slideDown"</code>
						,
						<code>"fadeIn"</code>
						, any of the <a href="/category/effects/">jQuery UI effects</a>.
						Set to an empty string to disable animation.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showAnim option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showAnim: <span
															class="string">"fold"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showAnim option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showAnim = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showAnim"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showAnim"</span>, <span
															class="string">"fold"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showButtonPanel" class="api-item">
					<h3>
						showButtonPanel<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether to show the button panel.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showButtonPanel option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showButtonPanel: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showButtonPanel option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showButtonPanel = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showButtonPanel"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showButtonPanel"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showCurrentAtPos" class="api-item">
					<h3>
						showCurrentAtPos<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>
						When displaying multiple months via the <a
							href="#option-numberOfMonths"><code>numberOfMonths</code></a>
						option, the
						<code>showCurrentAtPos</code>
						option defines which position to display the current month in.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showCurrentAtPos option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showCurrentAtPos: <span
															class="number">3</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showCurrentAtPos option, after
						initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showCurrentAtPos = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showCurrentAtPos"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showCurrentAtPos"</span>, <span
															class="number">3</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showMonthAfterYear" class="api-item">
					<h3>
						showMonthAfterYear<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether to show the month after the year in the header.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showMonthAfterYear option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showMonthAfterYear: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showMonthAfterYear option, after
						initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showMonthAfterYear = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showMonthAfterYear"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showMonthAfterYear"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showOn" class="api-item">
					<h3>
						showOn<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"focus"</code>
					</div>
					<div>
						When the datepicker should appear. The datepicker can appear when
						the field receives focus (
						<code>"focus"</code>
						), when a button is clicked (
						<code>"button"</code>
						), or when either event occurs (
						<code>"both"</code>
						).
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showOn option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showOn: <span
															class="string">"both"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showOn option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showOn = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOn"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOn"</span>, <span
															class="string">"both"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showOptions" class="api-item">
					<h3>
						showOptions<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>{}</code>
					</div>
					<div>
						If using one of the jQuery UI effects for the <a
							href="#option-showAnim"><code>showAnim</code></a> option, you can
						provide additional settings for that animation via this option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showOptions option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showOptions: { direction: <span
															class="string">"up"</span> } });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showOptions option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showOptions = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOptions"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOptions"</span>, { direction: <span
															class="string">"up"</span> } );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showOtherMonths" class="api-item">
					<h3>
						showOtherMonths<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Whether to display dates in other months (non-selectable) at the
						start or end of the current month. To make these days selectable
						use the <a href="#option-selectOtherMonths"><code>selectOtherMonths</code></a>
						option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showOtherMonths option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showOtherMonths: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showOtherMonths option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showOtherMonths = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOtherMonths"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showOtherMonths"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-showWeek" class="api-item">
					<h3>
						showWeek<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						When
						<code>true</code>
						, a column is added to show the week of the year. The <a
							href="#option-calculateWeek"><code>calculateWeek</code></a>
						option determines how the week of the year is calculated. You may
						also want to change the <a href="#option-firstDay"><code>firstDay</code></a>
						option.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the showWeek option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ showWeek: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the showWeek option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> showWeek = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showWeek"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"showWeek"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-stepMonths" class="api-item">
					<h3>
						stepMonths<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>1</code>
					</div>
					<div>Set how many months to move when clicking the
						previous/next links.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the stepMonths option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ stepMonths: <span
															class="number">3</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the stepMonths option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> stepMonths = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"stepMonths"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"stepMonths"</span>, <span
															class="number">3</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-weekHeader" class="api-item">
					<h3>
						weekHeader<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"Wk"</code>
					</div>
					<div>
						The text to display for the week of the year column heading. Use
						the <a href="#option-showWeek"><code>showWeek</code></a> option to
						display this column.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the weekHeader option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ weekHeader: <span
															class="string">"W"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the weekHeader option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> weekHeader = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"weekHeader"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"weekHeader"</span>, <span
															class="string">"W"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-yearRange" class="api-item">
					<h3>
						yearRange<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"c-10:c+10"</code>
					</div>
					<div>
						The range of years displayed in the year drop-down: either
						relative to today's year (
						<code>"-nn:+nn"</code>
						), relative to the currently selected year (
						<code>"c-nn:c+nn"</code>
						), absolute (
						<code>"nnnn:nnnn"</code>
						), or combinations of these formats (
						<code>"nnnn:-nn"</code>
						). Note that this option only affects what appears in the
						drop-down, to restrict which dates may be selected use the <a
							href="#option-minDate"><code>minDate</code></a> and/or <a
							href="#option-maxDate"><code>maxDate</code></a> options.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the yearRange option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ yearRange: <span
															class="string">"2002:2012"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the yearRange option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> yearRange = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"yearRange"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"yearRange"</span>, <span
															class="string">"2002:2012"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-yearSuffix" class="api-item">
					<h3>
						yearSuffix<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>""</code>
					</div>
					<div>Additional text to display after the year in the month
						headers.</div>
					<strong>Code examples:</strong>
					<p>Initialize the datepicker with the yearSuffix option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker({ yearSuffix: <span
															class="string">"CE"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the yearSuffix option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> yearSuffix = $( <span
															class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"yearSuffix"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).datepicker( <span
															class="string">"option"</span>, <span class="string">"yearSuffix"</span>, <span
															class="string">"CE"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</section>
			<section id="methods">
				<header>
					<h2 class="underline">Methods</h2>
				</header>
				<div id="method-destroy">
					<div class="api-item first-item">
						<h3>destroy()</h3>
						<div>Removes the datepicker functionality completely. This
							will return the element back to its pre-init state.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the destroy method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"destroy"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-dialog">
					<div class="api-item">
						<h3>dialog( date [, onSelect ] [, settings ] [, pos ] )</h3>
						<div>Opens the datepicker in a dialog box.</div>
						<ul>
							<li>
								<div>
									<strong>date</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
									or <a href="http://api.jquery.com/Types#Date">Date</a>
								</div>
								<div>The initial date.</div>
							</li>
							<li>
								<div>
									<strong>onSelect</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Function">Function</a>()
								</div>
								<div>A callback function when a date is selected. The
									function receives the date text and date picker instance as
									parameters.</div>
							</li>
							<li>
								<div>
									<strong>settings</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Options">Options</a>
								</div>
								<div>The new settings for the date picker.</div>
							</li>
							<li>
								<div>
									<strong>pos</strong>
								</div>
								<div>
									Type: <a
										href="http://api.jquery.com/Types#Number%5B2%5D%20or%20MouseEvent">Number[2]
										or MouseEvent</a>
								</div>
								<div>
									The position of the top/left of the dialog as
									<code>[x, y]</code>
									or a
									<code>MouseEvent</code>
									that contains the coordinates. If not specified the dialog is
									centered on the screen.
								</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the dialog method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"dialog"</span>, <span class="string">"10/12/2012"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-getDate">
					<div class="api-item">
						<h3>
							getDate()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Date">Date</a></span>
						</h3>
						<div>
							Returns the current date for the datepicker or
							<code>null</code>
							if no date has been selected.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the getDate method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> currentDate = $( <span
																	class="string">".selector"</span> ).datepicker( <span
																	class="string">"getDate"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-hide">
					<div class="api-item">
						<h3>hide()</h3>
						<div>Close a previously opened date picker.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the hide method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"hide"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-isDisabled">
					<div class="api-item">
						<h3>
							isDisabled()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
						</h3>
						<div>Determine whether a date picker has been disabled.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the isDisabled method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isDisabled = $( <span
																	class="string">".selector"</span> ).datepicker( <span
																	class="string">"isDisabled"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-option">
					<div class="api-item">
						<h3>
							option( optionName )<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Object">Object</a></span>
						</h3>
						<div>
							Gets the value currently associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to get.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isDisabled = $( <span
																	class="string">".selector"</span> ).datepicker( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>
							option()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
						</h3>
						<div>Gets an object containing key/value pairs representing
							the current datepicker options hash.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> options = $( <span
																	class="string">".selector"</span> ).datepicker( <span
																	class="string">"option"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( optionName, value )</h3>
						<div>
							Sets the value of the datepicker option associated with the
							specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to set.</div>
							</li>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A value to set for the option.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span>, <span
																	class="literal">true</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( options )</h3>
						<div>Sets one or more options for the datepicker.</div>
						<ul>
							<li>
								<div>
									<strong>options</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A map of option-value pairs to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"option"</span>, { disabled: <span
																	class="literal">true</span> } );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-refresh">
					<div class="api-item">
						<h3>refresh()</h3>
						<div>Redraw the date picker, after having made some external
							modifications.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the refresh method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"refresh"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-setDate">
					<div class="api-item">
						<h3>setDate( date )</h3>
						<div>
							Sets the date for the datepicker. The new date may be a
							<code>Date</code>
							object or a string in the current <a href="#option-dateFormat">date
								format</a> (e.g.,
							<code>"01/26/2009"</code>
							), a number of days from today (e.g.,
							<code>+7</code>
							) or a string of values and periods (
							<code>"y"</code>
							for years,
							<code>"m"</code>
							for months,
							<code>"w"</code>
							for weeks,
							<code>"d"</code>
							for days, e.g.,
							<code>"+1m +7d"</code>
							), or
							<code>null</code>
							to clear the selected date.
						</div>
						<ul>
							<li>
								<div>
									<strong>date</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
									or <a href="http://api.jquery.com/Types#Date">Date</a>
								</div>
								<div>The new date.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the setDate method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"setDate"</span>, <span class="string">"10/12/2012"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-show">
					<div class="api-item">
						<h3>show()</h3>
						<div>Open the date picker. If the datepicker is attached to
							an input, the input must be visible for the datepicker to be
							shown.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the show method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).datepicker( <span
																	class="string">"show"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-widget">
					<div class="api-item">
						<h3>
							widget()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
						</h3>
						<div>
							Returns a
							<code>jQuery</code>
							object containing the datepicker.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the widget method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> widget = $( <span
																	class="string">".selector"</span> ).datepicker( <span
																	class="string">"widget"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
			</section>
			<section class="entry-examples" id="entry-examples">
				<header>
					<h2 class="underline">Example:</h2>
				</header>
				<div class="entry-example" id="example-0">
					<h4>
						<span class="desc">A simple jQuery UI Datepicker.</span>
					</h4>
					<div class="syntaxhighlighter xml ">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

										<div class="line n6">6</div>

										<div class="line n7">7</div>

										<div class="line n8">8</div>

										<div class="line n9">9</div>

										<div class="line n10">10</div>

										<div class="line n11">11</div>

										<div class="line n12">12</div>

										<div class="line n13">13</div>

										<div class="line n14">14</div>

										<div class="line n15">15</div>

										<div class="line n16">16</div>

										<div class="line n17">17</div>

										<div class="line n18">18</div>

										<div class="line n19">19</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="doctype">&lt;!doctype html&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">html</span> <span
															class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">meta</span> <span class="attribute">charset</span>=<span
															class="value">"utf-8"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">title</span>&gt;</span>datepicker demo<span
															class="tag">&lt;/<span class="title">title</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">link</span> <span class="attribute">rel</span>=<span
															class="value">"stylesheet"</span> <span class="attribute">href</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">div</span> <span
															class="attribute">id</span>=<span class="value">"datepicker"</span>&gt;</span><span
															class="tag">&lt;/<span class="title">div</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">script</span>&gt;</span><span
															class="javascript"></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">"#datepicker"</span> ).datepicker();</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">html</span>&gt;</span>
													</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<h4>Demo:</h4>
					<div class="demo code-demo" data-height="300"></div>
				</div>
			</section>
		</div>
	</article>

</body>
</html>
